<template>
    <view class="container">
        <view class="section">
            <view class="section-title">账号注册</view>
            <view class="input-row">
                <text class="label">账号</text>
                <input class="input" placeholder="请输入商家账号" onInput="openID" />
            </view>
            <view class="input-row">
                <text class="label">密码</text>
                <input class="input" placeholder="请输入商家密码" type="password" />
                <icon type="eye" />
            </view>
        </view>

        <view class="section">
            <view class="section-title">基本信息</view>
            <view class="input-row">
                <text class="label">头像</text>
                <ant-uploader :maxCount="1" onChange="onChange" :onUpload="onUpload ? onUpload : 'onUpload'" />
            </view>
            <view class="input-row">
                <text class="label">店铺名</text>
                <input class="input" placeholder="请输入店铺名称" onInput="shopname" />
            </view>
            <view class="input-row">
                <text class="label">联系电话</text>
                <input class="input" placeholder="请输入联系电话" onInput="phone" />
            </view>
            <view class="input-row">
                <text class="label">店铺地址</text>
                <input class="input" placeholder="请输入店铺地址" onInput="address" />
            </view>
            <view class="input-row">
                <text class="label">店主姓名</text>
                <input class="input" placeholder="请输入店主姓名" onInput="storename" />
            </view>
            <view class="input-row">
                <text class="label">银行卡号</text>
                <input class="input" placeholder="请输入银行卡号" onInput="bankCard" />
            </view>
            <view class="input-row">
                <text class="label">开始营业</text>
                <ant-date-picker
                    slot="extra"
                    :defaultValue="defaultDate"
                    placeholder="请选择开始营业时间"
                    onPickerChange="handlePickerChange"
                    onVisibleChange="handleTriggerPicker"
                    :maskClosable="false"
                    onOk="handleOk"
                />
            </view>
            <view class="input-row">
                <text class="label">结束营业</text>
                <ant-date-picker
                    slot="extra"
                    :defaultValue="defaultDate"
                    placeholder="请选择结束营业时间"
                    onPickerChange="handlePickerChange"
                    onVisibleChange="handleTriggerPicker"
                    :maskClosable="false"
                    onOk="handleEnd"
                />
            </view>
            <view class="input-row">
                <text class="label">餐厅分类</text>
                <picker onChange="handleRef" :value="addIndex" :range="categories" class="input">
                    <view class="picker-placeholder">{{ classicFun }}</view>
                </picker>
            </view>
        </view>

        <view class="section">
            <view class="input-row">
                <text class="label">请上传营业执照</text>
                <ant-uploader :defaultFileList="defaultFileList" onChange="onChange" onUpload="onUpload" onPreview="onPreview" onRemove="onRemove" />
            </view>
            <view class="input-row">
                <text class="label">请上传身份证照</text>
                <ant-uploader :defaultFileList="defaultFileList" onChange="onChange" onUpload="onUpload" onPreview="onPreview" onRemove="onRemove" />
            </view>
        </view>
        <ant-button type="primary" onTap="handleTap">提交申请</ant-button>
    </view>
</template>

<script>	import {
		ref,
		onMounted
	} from 'vue';
	import {
		onShow,
		onLoad
	} from '@dcloudio/uni-app';
	import {
		onPullDownRefresh,
		onReachBottom
	} from "@dcloudio/uni-app";

export default {
    components: {
     
    },
    data() {
        return {
            categories: ['餐饮', '娱乐', '购物', '其他'],
            addIndex: 0,
            address: '',
            avatarurl: '',
            bankCard: '',
            businessImage: '',
            classic: '请选择活动类型',
            createTime: '',
            openID: '',
            phone: '',
            shopID: 0,
            shopname: '',
            status: '',
            stopTime: '',
            storename: '',
            userCardback: '',
            userCardfront: '',

            defaultFileList: [
                {
                    url: 'https://ts1.cn.mm.bing.net/th/id/R-C.fd81516a06ce33c15b194494272fa6e9?rik=XAfnJ6A9NFvAyA&riu=http%3a%2f%2fimg.touxiangwu.com%2fuploads%2fallimg%2f2022053117%2fivhiashhpu1.jpg&ehk=Yi2aDhWvd0rnBKl1xloJy8F1RfGd8%2bcC75k4ff8dVXk%3d&risl=&pid=ImgRaw&r=0',
                    status: 'done'
                },
                {
                    url: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.uMf5AX3a6yYpIhpEkyDxiQAAAA?rs=1&pid=ImgDetMain',
                    status: 'done'
                },
                {
                    url: 'https://gd-hbimg.huaban.com/194ac022012641c5b0d0e6a5fb27363a9b2294c615ef7-x63xov_fw658',
                    status: 'done'
                }
            ],

            controlledDateRange: '',
            onUpload: false,
            defaultDate: '',
            classicFun: ''
        };
    },
    methods: {
        addressFun(e) {
            this.setData(
                {
                    address: e.detail.value
                },
                () => {
                    console.log('Address updated:', this.address);
                }
            );
        },

        avatarurlFun(e) {
            this.setData(
                {
                    avatarurl: e.detail.value
                },
                () => {
                    console.log('avatarurl updated:', this.avatarurl);
                }
            );
        },

        bankCardFun(e) {
            this.setData(
                {
                    bankCard: e.detail.value
                },
                () => {
                    console.log('bankCard updated:', this.bankCard);
                }
            );
        },

        businessImageFun(e) {
            this.setData(
                {
                    businessImage: e.detail.value
                },
                () => {
                    console.log('businessImage updated:', this.businessImage);
                }
            );
        },

        classicFun(e) {
            this.setData(
                {
                    classic: e.detail.value
                },
                () => {
                    console.log('classic updated:', this.classic);
                }
            );
        },

        openIDFun(e) {
            this.setData(
                {
                    openID: e.detail.value
                },
                () => {
                    console.log('openID updated:', this.openID);
                }
            );
        },

        phoneFun(e) {
            this.setData(
                {
                    phone: e.detail.value
                },
                () => {
                    console.log('phone updated:', this.phone);
                }
            );
        },

        shopIDFun(e) {
            this.setData(
                {
                    shopID: e.detail.value
                },
                () => {
                    console.log('shopID updated:', this.shopID);
                }
            );
        },

        shopnameFun(e) {
            this.setData(
                {
                    shopname: e.detail.value
                },
                () => {
                    console.log('shopname updated:', this.shopname);
                }
            );
        },

        storenameFun(e) {
            this.setData(
                {
                    storename: e.detail.value
                },
                () => {
                    console.log('storename updated:', this.storename);
                }
            );
        },

        statusFun(e) {
            this.setData(
                {
                    status: e.detail.value
                },
                () => {
                    console.log('status updated:', this.status);
                }
            );
        },

        userCardbackFun(e) {
            this.setData(
                {
                    userCardback: e.detail.value
                },
                () => {
                    console.log('userCardback updated:', this.userCardback);
                }
            );
        },

        userCardfrontFun(e) {
            this.setData(
                {
                    userCardfront: e.detail.value
                },
                () => {
                    console.log('userCardfront updated:', this.userCardfront);
                }
            );
        },

        handleOk(date) {
            this.setData({
                createTime: this.msToDate(date).hasTime
            });
        },

        handleEnd(date) {
            this.setData({
                stopTime: this.msToDate(date).hasTime
            });
        },

        handleRef(e) {
            const index = e.detail.value;
            this.setData({
                addIndex: index,
                classic: this.categories[index]
            });
        },

        // 图片上传
        onUploadFun(file) {
            return new Promise((resolve, reject) => {
                uni.uploadFile({
                    url: url + '/addShop',
                    method: 'POST',
                    name: 'mfile',
                    fileType: 'image',
                    filePath: file.path,
                    success: (res) => {
                        this.setData({
                            avatarurl: res.data
                        });
                        resolve(res.data);
                    },
                    fail: (err) => {
                        reject(err);
                    }
                });
            });
        },

        onRemove(file) {
            return new Promise((resolve) => {
                console.log('即将移除的图片为：', file);
                uni.confirm({
                    title: '是否确认移除图片',
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    success: (e) => {
                        resolve(e.confirm);
                    }
                });
            });
        },

        onChange(fileList) {
            // 这里的数据包括上传失败和成功的图片列表，如果需要筛选出上传成功的图片需要在此处理
            console.log('图片列表：', fileList);
        },

        onPreview(file) {
            console.log('preview', file);
        },

        onUploadFun(file) {
            return new Promise((resolve) => {
                console.log('上传的图片为：', file);
                setTimeout(() => {
                    resolve('https://gw.alipayobjects.com/mdn/rms_226d75/afts/img/A*5m0ZQYhxhjEAAAAAAAAAAAAAARQnAQ');
                }, 2000);
            });
        },

        onBeforeUpload(localFileList) {
            console.log('即将上传的图片列表为：', localFileList);
            localFileList = localFileList.filter((item) => item.size < 10000);
            console.log('修改上传的图片列表为：', localFileList);
            return localFileList;
        },

        handleTap(e) {
            uni.alert({
                title: '提交成功'
            });
        },

        handleControlledRangeOk(value) {
            console.log('handleControlledRangeOk');
            console.log(value);
            this.setData({
                controlledDateRange: value
            });
        },

        handlePickerChange(date, dateStr, e) {
            console.log('onPickerChange', date, dateStr, e);
        },

        handleOk(date, format, e) {
            console.log('onOk', date, format, e);
        },

        handleTap() {
            // 获取输入框中的数据
            const {
                addressFun: address,
                avatarurlFun: avatarurl,
                bankCardFun: bankCard,
                businessImageFun: businessImage,
                classicFun: classic,
                createTime,
                openIDFun: openID,
                phoneFun: phone,
                shopIDFun: shopID,
                shopnameFun: shopname,
                statusFun: status,
                stopTime,
                storenameFun: storename,
                userCardbackFun: userCardback,
                userCardfrontFun: userCardfront
            } = this;
            console.log('Data being sent:', {
                address,
                avatarurl,
                bankCard,
                businessImage,
                classic,
                createTime,
                openID,
                phone,
                shopID,
                shopname,
                status,
                stopTime,
                storename,
                userCardback,
                userCardfront
            });

            // 校验数据（可选）
            // if (!account || !address || !phone) {
            //   my.alert({ content: '请填写完整的表单信息' });
            //   return;
            // }

            // 发送请求
            uni.request({
                url: url + '/addShop',
                // API 接口地址
                method: 'POST',
                data: {
                    address,
                    address,
                    avatarurl,
                    bankCard,
                    businessImage,
                    classic,
                    createTime,
                    openID,
                    phone,
                    shopID,
                    shopname,
                    status,
                    stopTime,
                    storename,
                    userCardback,
                    userCardfront
                },
                headers: {
                    'content-type': 'application/json' // 默认值
                },
                dataType: 'json',
                success: function (res) {
                    console.log('Success:', res);
                    uni.alert({
                        content: '保存成功'
                    });
                    uni.switchTab({
                        url: '/pages/myPage/myPage'
                    });
                },
                fail: function (error) {
                    console.error('Fail:', JSON.stringify(error));
                },
                complete: function (res) {
                    uni.hideLoading();
                }
            });
        }
    }
};
</script>
<style>
.container {
    padding: 20px;
}

.section {
    margin-bottom: 20px;
}

.section-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
}

.input-row {
    display: flex;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #ddd;
}

.label {
    flex: 0 0 120px;
    color: #333;
}

.input {
    flex: 1;
    border: none;
    outline: none;
}

.avatar-upload {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #ddd;
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.icon {
    width: 20px;
    height: 20px;
    color: #ccc;
}

.picker-placeholder {
    color: #999;
    display: flex;
}

.upload-button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    border: 1px solid #ddd;
    border-radius: 10px;
    margin-right: 10px;
}

.submit-button {
    width: 100%;
    background-color: #007aff;
    color: white;
    text-align: center;
    padding: 15px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    margin-top: 20px;
}

</style>
